<template>
  <div class="chart" ref="chart" @resize.native="onresize">

  </div>
</template>

<script>
    import echarts from 'echarts'
    import EventUtil from 'EventUtil'
    import _ from 'lodash'
    export default {
        name: "line-chart",
        props:{
          data:{
            type: Object,
            required: true
          }
        },
        mounted:function () {
          //实例化chart
          this.myChart = echarts.init(this.$refs.chart)

          //监听resize事件
          let vm = this
          this._onresize = _.debounce(function(){
            vm.myChart.resize()
          }, 200)
          EventUtil.addHandler(window, 'resize', this._onresize)

          let nav = document.getElementById("nav")
          if(nav){
            EventUtil.addHandler(nav, 'transitionend', this._onresize)
          }

          //设置各种选项
          this.myChart.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#283b56'
                }
              }},
            legend: {
              data:['expectedData', 'actualData']
            },
            grid: {
              show: true,
              left: 10,
              right: 10,
              bottom: 20,
              top: 30,
              containLabel: true
            },
            xAxis: {
              type: 'value',
              data: this.data.x,
              axisLabel:{
                formatter: function (value, index) {
                  return value.toFixed(2)
                }
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: 'expectedData',
              type: 'line',
              data: this.data.expectedData,
              itemStyle:{
                color: '#FF005A'
              },
              lineStyle:{
                width: 2
              }
            },
            {
              name: 'actualData',
              type: 'line',
              data: this.data.actualData,
              itemStyle:{
                color: '#3888fa'
              },
              lineStyle:{
                width: 2
              }
            }]
          });
        },
        beforeDestroy: function () {
          if(this.myChart){
            EventUtil.removeHandler(window, 'resize', this._onresize)
            let nav = document.getElementById("nav")
            if(nav) {
              EventUtil.removeHandler(nav, 'transitionend', this._onresize)
            }
            this.myChart.dispose()
            this.myChart = null
          }
        },
        watch: {
          data: function () {
            this.myChart.setOption({
              xAxis: {
                type: 'category',
                data: this.data.x
              },
              yAxis: {},
              series: [{
                name: 'expectedData',
                type: 'line',
                data: this.data.expectedData
              },
                {
                  name: 'actualData',
                  type: 'line',
                  data: this.data.actualData
                }]
            });
          }
        }
    }
</script>

<style lang="scss" scoped>
  .chart{
    height: 350px;
  }
</style>
